<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <link rel="stylesheet" href="./css/cropper.css">

    <style>
        body {
            background-color: #ededed;
        }

        #btkuang {
            width: 60%;
            display: inline-block;
        }

        #readCount {
            width: 100px;
            display: inline-block;
            flex: 2;
            text-align: center;
            padding: 0;
        }

        #shuliang {
            display: flex;
            width: 300px;
        }

        #shuliang #jia {
            flex: 1;
        }

        #shuliang #jian {
            flex: 1;
        }

        #youbian {
            margin-left: 300px;
            width: 300px;
        }

        #creatTime {
            display: inline-block;
            width: 200px;
        }

        .shoucang {
            width: 500px;
        }

        .juzhong {
            margin: 0 auto;
        }

        .layui-form-item {
            margin-top: 30px;
        }

        .layui-tab-content,
        .layui-tab-title {
            background-color: #fff;
        }

        .layui-tab-brief {
            padding: 10px;
        }

        .sananniu {
            margin-left: 300px;
        }

        .tupian {
            display: inline-block;
            width: 150px;
            height: 150px;
        }

        .tupian img {
            width: 100%;
            height: 100%;
        }

        #btnChooseImage {
            position: absolute;
            top: 65px;
            left: -82px;
        }
    </style>
</head>

<body>
    <!-- tab栏切换 -->
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">基础信息</li>
            <li>SEO信息</li>
            <li>文章内容</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <!-- 第一页 -->
                <!-- 表单 -->
                <form class="layui-form juzhong" action="" id="formAdd">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input" id="btkuang">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">作者</label>
                        <div class="layui-input-inline">
                            <input type="text" name="author" required lay-verify="required" placeholder="请输入作者"
                                autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" id="youbian">
                            <select name="cate_id">
                                <option value="">所有分类</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <!-- 阅读次数 -->
                        <div class="layui-input-inline" id="shuliang">
                            <label class="layui-form-label">阅读次数</label>
                            <button type="button" class="layui-btn" id="jian">-</button>
                            <input type="text" name="click" required lay-verify="required" class="layui-input"
                                placeholder="1" id="readCount">
                            <button type="button" class="layui-btn" id="jia">+</button>
                        </div>
                        <!-- 创建时间 -->
                        <div class="layui-input-inline" id="youbian">
                            <input type="text" name="create_date" lay-verify="required" class="layui-input"
                                id="creatTime" placeholder="创建时间">
                        </div>
                    </div>



                    <!-- 开关 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否推荐</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" lay-skin="switch">
                        </div>
                        <label class="layui-form-label">是否置顶</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" lay-skin="switch">
                        </div>
                    </div>
                    <!-- 收藏数量 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">收藏数量</label>
                        <div class="layui-input-block  shoucang">
                            <input type="text" name="lovenum" required lay-verify="required" autocomplete="off"
                                class="layui-input" id="btkuang">
                        </div>
                    </div>
                    <!-- 上传图片 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章缩略图</label>
                        <div class="layui-input-block  shoucang">
                            <!-- <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input" id="btkuang"> -->
                            <!-- <button class="layui-btn" id="btnChooseImage">上传</button> -->



                            <div class="tupian">
                                <img src="./upload/images/tom.jpg" name="pic" alt="">
                            </div>

                            <input type="file" id="file" accept="image/jpeg,image/png,image/bmp,image/gif" />
                        </div>
                    </div>
                    <!-- 复选框 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章标签</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="" title="搞笑" lay-skin="primary" checked>
                            <input type="checkbox" name="" title="我的" lay-skin="primary">
                            <input type="checkbox" name="" title="浴火" lay-skin="primary">
                            <input type="checkbox" name="" title="二次元" lay-skin="primary">
                            <input type="checkbox" name="" title="摄影" lay-skin="primary">
                            <input type="checkbox" name="" title="汉服" lay-skin="primary">
                            <input type="checkbox" name="" title="文字控" lay-skin="primary">
                            <input type="checkbox" name="" title="诗歌" lay-skin="primary">
                            <input type="checkbox" name="" title="手机控" lay-skin="primary">
                            <input type="checkbox" name="" title="懒癌患者" lay-skin="primary">
                            <input type="checkbox" name="" title="资深吃货" lay-skin="primary">
                            <input type="checkbox" name="" title="动漫" lay-skin="primary">
                            <input type="checkbox" name="" title="娱乐" lay-skin="primary">
                            <input type="checkbox" name="" title="科技" lay-skin="primary">
                            <input type="checkbox" name="" title="123" lay-skin="primary">
                            <input type="checkbox" name="" title="qwq" lay-skin="primary">
                        </div>
                    </div>
                    <!-- 三按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block sananniu">
                            <button class="layui-btn">立即发布</button>
                            <button class="layui-btn">保存草稿</button>
                            <button class="layui-btn return">返回列表</button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 第二页 -->
            <div class="layui-tab-item">
                <form class="layui-form" action="" id="formSEO">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">SEO关键字</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea" name="keywords"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">SEO的描述</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" name="description" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <!-- 三按钮 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block sananniu">
                            <button class="layui-btn">立即发布</button>
                            <button class="layui-btn">保存草稿</button>
                            <button class="layui-btn return">返回列表</button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 第三页 -->
            <div class="layui-tab-item">
                <div id="contentBox"></div>
                <!-- 三按钮 -->
                <div class="layui-form-item">
                    <div class="layui-input-block sananniu">
                        <button class="layui-btn">立即发布</button>
                        <button class="layui-btn">保存草稿</button>
                        <button class="layui-btn return">返回列表</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/axios.min.js"></script>
    <script src="./lib/layui/layui.all.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/ajaxBase.js"></script>
    <script src="./js/wangEditor.js"></script>

    <script>
        const form = layui.form;
        const element = layui.element;
        const laydate = layui.laydate
        //==============表单================
        // layui.use('form', function () {
        //     //提交
        //     form.on('submit(formDemo)', function (data) {
        //         layer.msg(JSON.stringify(data.field));
        //         return false;
        //     });
        // });
        // ===============tab栏切换=========================
        layui.use('element', function () {
            //一些事件
            element.on('tab(demo)', function (data) {
                console.log(data);
            });
        });
        layui.use('laydate', function () {
            //执行一个laydate实例
            laydate.render({
                elem: '#creatTime' //指定元素
            });
        })

        // =====================初始化富文本编辑器===================
        const E = window.wangEditor
        const editor = new E('#contentBox')
        editor.create()




        $('#readCount').val(1)
        // console.log($('#readCount').val())
        // ===================所有分类的下拉框===================
        const classArr = [
            {
                shuzi: 3,
                leibie: '时政'
            }, {
                shuzi: 4,
                leibie: '图片'
            },
            {
                shuzi: 5,
                leibie: '娱乐'
            },
            {
                shuzi: 6,
                leibie: '汽车'
            },
            {
                shuzi: 7,
                leibie: '段子'
            },
            {
                shuzi: 8,
                leibie: '科技'
            },
            {
                shuzi: 9,
                leibie: '时尚'
            },
        ]
        axios.get('/ydd_article/list').then(res => {
            // console.log(res.data.data.data)
            const newArr = classArr.map(item => {
                return `
        <option value="${item.shuzi}">${item.leibie}</option>
        `
            }).join('')
            // console.log(newArr)
            $('[name=cate_id]').append(newArr)
            form.render()
        })

        // ==========================添加文章==========================
        // 数字增减
        $('#jia').on('click', function () {
            let n = $(this).siblings('#readCount').val()
            n++
            $(this).siblings('#readCount').val(n)
        })
        $('#jian').on('click', function () {
            let n = $(this).siblings('#readCount').val()
            // console.log(n)
            if (n == 1) {
                return false
            }
            n--
            // console.log(n)
            $(this).siblings('#readCount').val(n)
        })







        // layui.use('form', function () {
        //     //方法提交
        //     $('#btnChooseImage').on('click', function (data) {
        //         $('#file').click()
        //         return false
        //     })
        // })


        // let saveImg
        // let file
        // $('#file').on('change', function () {
        //     file = this.files[0]
        //     // console.log('/upload/images/' + file.name)
        //     // console.log(file.name)
        //     let newSrc = URL.createObjectURL(file)
        //     console.log(newSrc)
        //     // console.log('/upload/images/' + file.name);
        //     $('img').attr('src', '/upload/images/' + file.name)
        //     let fd = new FormData()
        //     fd.append('file', file)
        //     axios.defaults.headers["Content-Type"] = "multipart/form-data";
        //     axios({
        //         method: 'post',
        //         url: '/common/upload?type=images',
        //         data: fd,
        //     }).then(res => {
        //         console.log(res.data.data.savePath)
        //         saveImg = res.data.data.savePath
        //         $('img').attr('src', 'http://124.223.14.236:8060/' + saveImg)
        //     })
        // })
        // 给文件域注册change事件, 当选择的文件发生变化时触发
        let newImgURL = ''
        let file = ''
        let pic = ''
        $('#file').on('change', function (e) {
            e.preventDefault()
            file = this.files[0]
            const fd = new FormData()
            fd.append('file', file)
            axios({
                method: 'post',
                url: '/common/upload?type=images',
                data: fd,
            }).then(res => {
                console.log(res.data.data.savePath)
                pic = res.data.data.savePath
                // $('img').attr('src', 'http://124.223.14.236:8060/' + saveImg)
            })
            // console.log('/upload/images/' + file.name)
            // console.log(file.name)
            newImgURL = URL.createObjectURL(file)
            // console.log(newSrc)
            // console.log('/upload/images/' + file.name);
            $('img').attr('src', newImgURL)

            // axios.defaults.headers["Content-Type"] = "multipart/form-data";
        })
        addRender()
        function addRender() {
            $('#formAdd').on('submit', function (e) {
                e.preventDefault()
                let leibieid
                if ($('.layui-select-title input').val() === '时政') {
                    leibieid = 3
                } else if ($('.layui-select-title input').val() === '图片') {
                    leibieid = 4
                } else if ($('.layui-select-title input').val() === '娱乐') {
                    leibieid = 5
                } else if ($('.layui-select-title input').val() === '汽车') {
                    leibieid = 6
                } else if ($('.layui-select-title input').val() === '段子') {
                    leibieid = 7
                } else if ($('.layui-select-title input').val() === '科技') {
                    leibieid = 8
                } else if ($('.layui-select-title input').val() === '时尚') {
                    leibieid = 9
                } else {
                    leibieid = null
                }

                let data = {
                    author: $('[name=author]').val(),
                    cateid: leibieid,
                    click: $('[name=click]').val(),
                    content: editor.txt.html(),
                    create_date: Date.parse($('#creatTime').val()),
                    description: $('[name=description]').val(),
                    ishot: $('[name=ishot]:checked').length,
                    istop: $('[name=istop]:checked').length,
                    keywords: $('[name=keywords]').val(),
                    lovenum: $('[name=lovenum]').val(),
                    // pic: saveImg,
                    pic: 'upload/images/20230319/1679156949062.jpg',
                    status: '2',
                    tags: '1',
                    title: $('[name=title]').val(),
                }
                console.log(data)
                // console.log(saveImg.split('/').join(''));
                let fd = new FormData()
                fd.append('author', $('[name=author]').val())
                fd.append('cateid', leibieid)
                fd.append('click', $('[name=click]').val())
                fd.append('content', editor.txt.html())
                fd.append('create_date', Date.parse($('#creatTime').val()))
                fd.append('description', $('[name=description]').val())
                fd.append('ishot', $('[name=ishot]:checked').length)
                fd.append('istop', $('[name=istop]:checked').length)
                fd.append('keywords', $('[name=keywords]').val())
                fd.append('lovenum', $('[name=lovenum]').val())
                fd.append('pic', pic)
                fd.append('status', 2)
                fd.append('tags', '1')
                fd.append('title', $('[name=title]').val())
                fd.forEach((k, v) => {
                    console.log(v, k);
                })

                axios.post('/ydd_article/add', fd).then(res => {
                    console.log(res)
                    location.href = './article.html'
                })
            })
        }


        // let data = {
        //     author: $('[name=author]').val(),
        //     cateid: leibieid,
        //     click: $('[name=read]').val(),
        //     content: editor.txt.html(),
        //     create_date: Date.parse($('#creatTime').val()),
        //     description: $('[name=desc2]').val(),
        //     ishot: $('[name=switch1]:checked').length,
        //     istop: $('[name=switch2]:checked').length,
        //     keywords: $('[name=desc1]').val(),
        //     lovenum: $('[name=love]').val(),
        //     pic: '',
        //     status: '2',
        //     tags: '',
        //     title: $('[name=title]').val(),
        // }
        // 注册表单提交事件



        // ========================上传头像======================




        // =========================返回列表=====================
        $('.return').on('click', function () {
            location.href = './article.html'
        })


    </script>
</body>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script> -->


</html>